import { useEffect, useState } from 'react'
import { fetchAuditList, AuditListType, auditList } from '../../api'
import { Table, Button } from 'antd'
import { debounce } from 'lodash'

export interface AuditListItem {
  'name': string,
  'createTime': string,
  'desc': string,
  'income': number,
  'type': AuditListType,
  'key': string
}



const App = () => {
  const [type, setType] = useState<AuditListType>('全部')
  const [list, setList] = useState<AuditListItem[]>([])
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '部门',
    dataIndex: 'type',
    key: 'type'
  }, {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc'
  }, {
    title: '工资',
    dataIndex: 'income',
    key: 'income'
  }, {
    title: '审核',
    key: 1,
    render(value: any) {
      console.log(value);

      return <Button type="primary" danger onClick={() => (handleAuditList(value.key))}>审核</Button>
    }
  }]

  const onSelectChange = (selectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys)
  }

  // 批量审核
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 列表请求
  const handleFetchList = async () => {
    const resp = await fetchAuditList({ type })
    setList(resp.data.data)
  }
  // 审核请求(防抖)
  const handleAuditList = debounce(async (key: string | string[]) => {
    const resp = await auditList({ key })
    if (resp.data.code === 200) {
      handleFetchList()
    }
  }, 400)

  useEffect(() => {
    handleFetchList()
  }, [])
  return (
    <>
      {selectedRowKeys.length > 0 && <Button type="default" danger onClick={() => handleAuditList(selectedRowKeys)}>批量审核</Button>}
      <Table dataSource={list} columns={columns} rowSelection={rowSelection}></Table>
    </>
  )
}

export default App